<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>正在处理的订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="orderingList" style="width: 100%">
        <el-table-column prop="orderID" label="订单号" width="70"></el-table-column>
        <el-table-column
          prop="orderUserName"
          label="乘客姓名"
          width="100"
        ></el-table-column>
        <el-table-column prop="orderFood" label="食物">
            <template slot-scope="scope">{{
            scope.row.orderFood | handleOrderFoods
          }}</template>
        </el-table-column>
        <el-table-column
          label="收货地址"
          width="120"
        >
        <template slot-scope="scope">{{
            scope.row.orderTrainName + ' ' + scope.row.orderTrainNum + ' ' + scope.row.orderTrainSeat 
          }}</template>
        </el-table-column>
        <el-table-column label="订单日期" width="150">
          <template slot-scope="scope">{{
            scope.row.orderDate | dateFormat
          }}</template>
        </el-table-column>
        <el-table-column label="订单状态" width="120">
          <template slot-scope="scope">{{
            scope.row.orderState == "0" ? "未送达" : "已送达"
          }}</template>
        </el-table-column>
        <el-table-column prop="orderMoney" label="总价格/元" width="120"></el-table-column>
        <el-table-column
          label="支付方式"
          width="100"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.paymentMethod == 1">微信</span>
          <span v-else-if="scope.row.paymentMethod == 2">支付宝</span>
          <span v-else>现金</span>
        </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="删除订单"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini" @click="deleteOrder(scope.row.orderID)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderingList: []
    }
  },
  created() {
    //获取订单列表
    this.getOrderingList()
  },
  methods: {
    //获取订单列表
    async getOrderingList() {   
      //? 发请求
      const { data: res } = await this.$http.get('order')
      res.data = res.data.filter(v => v.orderState == 0)
      // 处理食物 鸡扒饭 4 9.99,牛腩饭 2 10.99,烤奶 6 20.99
      res.data.forEach(v => {
        v.orderFood = v.orderFood.split(',').map(m => m.split(' '))
      })
      this.orderingList = res.data
      console.log('res.data: ', res.data);
    },
    //点击删除订单
    deleteOrder(orderId) {
      this.$confirm('此操作将删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //?发请求
          const { data: res} = await this.$http.delete(`order/${orderId}`)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getOrderingList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    filters: {
      handleOrderFoods: (val) => {
        // 鸡扒饭 x2, 烧鸭饭 x1  	val.map(v => v[0] + ' x' + v[1]).join(',')
// [ [ "鸡扒饭", "4", "9.99" ], [ "牛腩饭", "2", "10.99" ], [ "烤奶", "6", "20.99" ] ]
        var str = ''
        val.forEach( (v,i) => {
          str += v[0] + 'x' + v[1]
          if(val.length-1 != i ) str+= ','
        })
        return str
      }
    }
}
</script>

    }
  }
}
</script>
<style lang="less" scoped></style>
